<script lang="ts" setup>
import { watch, ref, onMounted, reactive, computed } from 'vue';
import { handleTree } from '@vben/utils';
// import { getDingdDeptInfoTree } from '#/api/moxi/dingddeptinfo';
import { getCamsPage, override } from '#/api/moxi/Canspage';
import { getTree } from '#/api/moxi/bxccameragroup';

import { message, Card, Tree } from 'ant-design-vue';
import dayjs from 'dayjs';


// 定义 props 接收 id
const props = defineProps<{
    id?: string | number;
}>();
const loading = ref(false); // 加载状态
const deptTree = ref<any[]>([]); // 部门树
// 监听 id 变化，当 id 传入时执行相关逻辑
watch(() => props.id, async (newId) => {
    if (newId) {
        console.log('接收到的 id:', newId);
    }
}, { immediate: true });



const dataSource = ref<any[]>();

const columns = [
    {
        title: '序号',
        customRender: ({ index }: { index: number }) => index + 1,
        align: 'center',
    },
    {
        title: '摄像头昵称',
        dataIndex: 'nickname'
    },
    {
        title: '摄像头编号',
        dataIndex: 'code'
    },
];
type Key = string | number;
const selectedRowKeys = ref<Key[]>([]);

/** 初始化部门 */
onMounted(async () => {
    try {
        loading.value = true;
        const data = await getTree();
        console.log(data);
        deptTree.value = handleTree(data);
    } catch (error) {
        console.error('获取部门数据失败', error);
    } finally {
        loading.value = false;
    }
});

/** 选中部门 */
const handleSelect = async (_selectedKeys: any[], info: any) => {
    console.log(props.id);
    console.log('选中的部门:', info.node.dataRef);
    try {
        loading.value = true;
        // 查询改组下的所有摄像头
        const params = {
            cameraGroupId: info.node.dataRef.id,
            pageNum: 1,
            pageSize: 10,
        };
        const data = await getCamsPage(params)
        dataSource.value = data.list;
        console.log('摄像头信息:', data);
        // 反向渲染查询
         const obj = {
            ruleId: props.id as number,
            cameraGroupId: info.node.dataRef.id,
            pageNum: 1,
            pageSize: 10,
        };
        const res = await getCamsPage(obj)
        console.log('返现渲染:', res);
        if (res.total > 0) {
           let objVal = res.list.map((item: any) => item.code); 
           console.log(objVal);
            
           selectedRowKeys.value = objVal;
        }
    } catch {

    }
};
// 选中的
const rowSelection = computed(() => ({
    selectedRowKeys: selectedRowKeys.value,
    onChange: (keys: Key[], selectedRows: any[]) => {
        selectedRowKeys.value = keys;
        console.log('selectedRowKeys:', keys, 'selectedRows:', selectedRows);
    },
}));


// 绑定摄像头
const handleBindCamera = async () => {
    try {
        const res = await override({
            ruleId: props.id as number,
            cameraCodes: selectedRowKeys.value,
        });
        console.log(666);
        console.log(res);
        if (res.length > 0) {
            message.success('绑定成功');
            return true;
        } else {
            return false;
            message.success('绑定失败');
        }
    } catch {
        console.log("绑定失败");
        return false;
    }
}
defineExpose({ handleBindCamera });
</script>
<template>
    <div class="flex h-full w-full">
        <div class="mr-4 h-full w-1/4">
            <Tree style="margin-top: 20px" :spinning="loading" class="pt-1" v-if="deptTree.length > 0"
                :tree-data="deptTree" :field-names="{ title: 'name', key: 'id', children: 'children' }"
                @select="handleSelect" :default-expand-all="true" />
        </div>

        <div class="w-3/4">
            <a-table :row-selection="rowSelection" :columns="columns" :data-source="dataSource" row-key="code" />
        </div>
    </div>
</template>

<style scoped></style>
